import { defineComponent, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import orderListService from "@/modules/policys/orderList/orderList.service";
import useXlsx from "@/hooks/useXlsx";
import { $orderExport, $peopleList } from "@/api/policys/orderList";
import { SearchOutlined, YoutubeOutlined } from "@ant-design/icons-vue";
import RecordingPopup from "./popup/recordingPopup/recordingPopup";
import useNavigator from "@/hooks/useNavigator";

export default defineComponent({
  name: 'orderListPage',
  setup() {
    const navigator = useNavigator();
    const xlsx = useXlsx();
    const state = reactive({
      toolbar: {
        left: ["refresh", "output"],
        right: ["filter", "search"],
        output: {
          handler: async (e: any) => {
            xlsx.init({
              limit: 2000,
              service: $orderExport
            })
            await xlsx.defineList([
              {
                label: '参保产品',
                value: 'pro_name',
                width: 20,
              },
              {
                label: '订单号',
                value: 'order_no',
                width: 25,
              },
              {
                label: '投保人',
                value: 'applicant_name',
                width: 15,
              },
              {
                label: '投保人证件类型',
                value: 'applicant_id_type',
                width: 20,
              },
              {
                label: '投保人证件号',
                value: 'applicant_id_no',
                width: 20,
              },
              {
                label: '投保人手机号',
                value: 'applicant_mobile',
                width: 20,
              },
              {
                label: '性别',
                value: 'sex',
                width: 10,
              },
              {
                label: '出生日期',
                value: 'birthday',
                width: 20,
              },
              {
                label: '年龄',
                value: 'age',
                width: 10,
              },
              {
                label: '证件类型',
                value: 'id_type',
                width: 20,
              },
              {
                label: '证件号',
                value: 'id_no',
                width: 20,
              },
              {
                label: '手机号',
                value: 'mobile',
                width: 20,
              },
              {
                label: '出单状态',
                value: 'picc_order_status',
                width: 20,
              },
              {
                label: '创建时间',
                value: 'create_time',
                width: 20,
              },
              {
                label: '订单号',
                value: 'order_no',
                width: 20,
              },
              {
                label: '系统流水号',
                value: 'out_trade_no',
                width: 25,
              },
              {
                label: '参保人数',
                value: 'people_count',
                width: 10,
              },
              {
                label: '支付方式',
                value: 'pay_type_name',
                width: 12,
              },
              {
                label: '订单状态',
                value: 'order_status',
                width: 15,
              },
              {
                label: '支付时间',
                value: 'pay_time',
                width: 20,
              },
              {
                label: '保费',
                value: 'price',
                width: 12,
              },
            ]);
            await xlsx.exportToExcel('人员导出.xlsx');
          }
        }
      },
      dataSource: [],
      columns: [
        {
          title: "订单号",
          dataIndex: "order_no",
          align: "center",
          width: "200px",
        },
        {
          title: "保单号",
          dataIndex: ["picc_order", "policy_no"],
          align: "center",
          width: "200px",
        },
        {
          title: "投保人姓名",
          dataIndex: "applicant_name",
          align: "center",
          width: "120px",
        },
        {
          title: "投保人证件号",
          dataIndex: "applicant_id_no",
          align: "center",
          width: "150px",
        },
        {
          title: "投保人手机号",
          dataIndex: "applicant_mobile",
          align: "center",
          width: "150px",
        },
        {
          title: "旅游线路",
          dataIndex: "tour_route",
          align: "center",
          width: "100px",
        },
        {
          title: "旅游团编号",
          dataIndex: "tour_group_no",
          align: "center",
          width: "100px",
        },
        {
          title: "保费",
          dataIndex: "sum_premium",
          align: "center",
          width: "100px",
        },
        {
          title: "提交时间",
          dataIndex: "create_time",
          align: "center",
          width: "180px",
        },
        {
          title: "订单状态",
          dataIndex: ["order_status", "label"],
          align: "center",
          width: "100px",
        },
        {
          title: "出单状态",
          dataIndex: ["picc_order_status", "label"],
          align: "center",
          width: "100px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "150px",
        },
      ],
      loading: false,
      searchForm: {
        order_no: {
          type: "input",
          label: "订单号",
          attrs: { placeholder: "请输入订单号" },
        },
        applicant_id_no:{
          type: "input",
          label: "投保人身份证号",
          attrs: { placeholder: "投保人身份证号" },
        },
        insured_id_no: {
          type: "input",
          label: "被保险人身份证号",
          attrs: { placeholder: "被保险人身份证号" },
        },
        order_status: {
          type: "select",
          label: "订单状态",
          attrs: { placeholder: "请选择订单状态" },
          datas: [
            { label: "待支付", value: 0 },
            { label: "已支付", value: 11 },
            { label: "已承保", value: 1 },
            { label: "承保失败", value: -1 },
          ],
        },
        picc_order_status: {
          type: "select",
          label: "出单状态",
          attrs: { placeholder: "请选择出单状态" },
          datas: [
            { label: "已出单", value: 1 },
            { label: "待出单", value: 0 },
            { label: "出单失败", value: -1 },
          ]
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      btnLoading: false
    })
    const LTableRef = ref(null as any);
    const $service = new orderListService();
    const recordingPopupRef = ref(null as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    return () => (
      <Page>
        <CardWithTitle title="订单列表">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          size="small"
                          v-slots={{
                            icon: () => <YoutubeOutlined />,
                          }}
                          onClick={() => {
                            if (state.btnLoading == false) {
                              state.btnLoading = true;
                              recordingPopupRef.value.open(record)
                            }
                          }}
                        >
                          回溯
                        </a-button>
                        <a-button
                          type="primary"
                          size="small"
                          v-slots={{
                            icon: () => <SearchOutlined />,
                          }}
                          onClick={() => {
                            navigator.push({ name: 'orderListPageInsuredList', query: { order_no: record.order_no } })
                          }}
                        >
                          被保人清单
                        </a-button>
                      </div>
                    )
                  }
                }
              }}
            />
          </LTable>
        </CardWithTitle>
        <RecordingPopup ref={recordingPopupRef}
          onCancel={() => {
            state.btnLoading = false;
            console.log('关闭')
          }}
        />
      </Page>
    )
  }
})